<template>
  <div class="app-container">
    <!-- 查询层 -->
   <el-card class="card" shadow="hover">

       <el-tabs v-model="queryParams.orderState" tab-position="top" @tab-click="tabChange" class="tabs">
              <el-tab-pane v-for="item in tabs" :key="item.val" :label="item.labl + '(' + item.num + ')'"
                  :name="item.val"></el-tab-pane>
        </el-tabs>

     <div class="card-body"  >

       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item label="订单编号" prop="number">
             <el-input v-model="queryParams.number" placeholder="请输入订单编号" clearable style="width: 240px"
                       @keyup.enter.native="handleQuery" />
        </el-form-item>

         <el-form-item label="创建时间"  >
           <el-date-picker
                 v-model="dateTimeValue"
                 type="daterange"
                 range-separator="To"
                 start-placeholder="开始时间"
                 end-placeholder="结束时间"
                 value-format="YYYY-MM-DD"
               />
         </el-form-item>


         <el-form-item>
           <el-button type="primary" @click="handleQuery()"> 查询</el-button >

         </el-form-item>

       </el-form>
     </div>
   </el-card>


   <!-- 表格和分页条层 -->
   <el-card class="card top5" shadow="never">
     <div class="card-body" >
       <!--表格显示数据 -->
       <el-table
         v-loading="loading"
         :data="tableData.rows"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="订单编号" prop="number"></el-table-column>
          <el-table-column label="下单时间" prop="orderTime" width="100"></el-table-column>
          <el-table-column label="手机号"  prop="phone"     />
          <el-table-column label="联系人"  prop="consignee"     />
          <el-table-column label="商家名称" prop="merchantName"></el-table-column>
          <el-table-column label="订单金额" prop="amount"></el-table-column>

        <el-table-column label="订单状态">
           <template slot-scope="scope">
               <span v-if=" scope.row.status == 1  " class="tag-four">待付款</span>
               <span v-if="scope.row.status == 2  " class="tag-one">待发货</span>
               <span v-if="scope.row.status == 3 " class="tag-one">待收货</span>
               <span v-if="scope.row.status == 4" class="tag-three">已完成</span>
               <span v-if="scope.row.status == 5" class="tag-three">已取消</span>
           </template>
        </el-table-column>

          <el-table-column  label="操作" width="250" align="left"  class-name="small-padding fixed-width">
              <template slot-scope="scope">
                  <el-button size="small"   icon="el-icon-edit" @click="seeOrder(scope.row)"  >查看订单</el-button>

                  <!-- 待付款状态 -->
                  <span v-if="scope.row.status == 1 " class="operate">关闭订单</span>
                  <!-- 待发货状态-->
                  <span v-if="scope.row.status == 2"  class="operate">发货</span>
                  <!-- 待收货状态-->
                  <span v-if="scope.row.status == 3"  class="operate">确认收货</span>

              </template>
          </el-table-column>

       </el-table>

       <el-pagination
         v-if="tableData.total > 0"
         v-model:current-page="queryParams.page"
         v-model:page-size="queryParams.size"
         :page-sizes="[10, 20, 30, 40, 50, 100]"
         small="small"
         layout="total, sizes, prev, pager, next, jumper"
         :total="tableData.total"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
     </div>
   </el-card>



  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        // 表单查询条件对象
        queryParams:{
          page: 1,
          size: 10
        },
        // 分页表格分页的结果对象
         tableData: {
           total: 0,
           rows: []
         },
         //表格选中的对象
         mutilrows:[],
         //表格选中对象的主键的值
         ids: [],
         //编辑按钮禁用
         single: true,
         //数据字典返回结果
         dicts: {},
         tabs: [
           { labl: "全部", num: "0", val: "0" },
           { labl: "待付款", num: "0", val: "1" },
           { labl: "待发货", num: "0", val: "2" },
           { labl: "已派送", num: "0", val: "3" },
           { labl: "已完成", num: "0", val: "4" },
           { labl: "已取消", num: "0", val: "5" }
         ],
             //日期组件绑定模型
         dateTimeValue: undefined,
      }
    },
    methods: {
       // 订单状态的筛选
      tabChange(tab) {
       this.queryParams.orderState= tab.index
       this.queryParams.page = 1;
       this.handleQuery();
      },
      // 每页几笔发生变化
       handleSizeChange(val) {
          this.queryParams.page=1
          this.queryParams.size=val
          // 重新查询
          this.fetchData()
      },
      // 当前页发生变化
      handleCurrentChange(val) {
        this.queryParams.page=val
        // 重新查询
        this.fetchData()
      },
      // 获取后台的查询数据
      fetchData(){
        
      },
      //点击搜索按钮
      handleQuery(){
        this.queryParams.page =1
        this.fetchData()
      },
      //查询数据字典的值
      fetchDictTypes() {
        // const params= ['product_status']
        // dataDictTypes(params).then(resp=> {
        //    this.dicts = resp.data
        // })
      },
      handleSelectionChange(val){
       this.multipleData = val
       //得到主键的id
       this.ids =  val.map(v=> v.id)
       //判断修改和删除属性
       this.single= val.length!==1
       this.multiple= val.length===0
      } 
     
    },
    created() {

    }
  }
</script>

<style scoped="scoped">

  .tag-one,.tag-two,.tag-three,.tag-four,.tag-danger{
      position: relative;
      padding-left: 16px;
      &::before{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .tag-one::before{
      background-color: #1890FF;
    }
    .tag-two::before{
      background-color: #52C41A;
    }
    .tag-three::before{
      background-color: #C4C4C4;
    }
    .tag-four::before{
      background-color: #E6A23C;
    }
    .tag-danger::before{
      background-color: #F56C6C;
    }


  .operate {
    color: #1890FF;
    font-size: 12px;
    line-height: 22px;
    cursor: pointer;
    padding-left: 10px;
  }
</style>
